package com.example.parkingsharing.ui.components.user

import android.util.Log
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.layout.layoutId
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.constraintlayout.compose.ConstraintLayout
import androidx.constraintlayout.compose.ConstraintSet
import com.example.parkingsharing.R
import com.example.parkingsharing.ui.theme.ParkingSharingTheme
//import com.google.accompanist.insets.statusBarsHeight

@Composable
fun IDCard(
    modifier: Modifier = Modifier,
    onClicked: () -> Unit,
    userName: String,
    userSignature: String,
    userAvatarId: Int
){
    Row(
        // modifier有先后顺序
        modifier = modifier
            .clip(RoundedCornerShape(28.dp))
            .background(color = MaterialTheme.colors.surface)
            // 若存在surface，下方即存在与之对应的onSurface，可使内容突出
            .clickable(
                onClick = { onClicked() },
                indication = null,
                interactionSource = remember {
                    // 默认 Modifier.clickable() 点击事件自带点击水波纹效果；
                    // 使用 indication = null, interactionSource = remember{} 取消
                    MutableInteractionSource()
                }
            )
            .shadow(
                elevation = 6.dp,
            )
            .padding(6.dp),
    ) {
        // 显示用户头像
        Surface(
            modifier = Modifier.size(50.dp),
            shape = CircleShape,
            color = MaterialTheme.colors.onSurface.copy(alpha = 0.2f),
            contentColor = MaterialTheme.colors.primary,
        ) {
            // TODO("更新用户头像图片")
            Image(painter = painterResource(id = userAvatarId),
                contentDescription = "User Icon"
            )
        }
        // 计算总是有损耗的，不要滥用Spacer,并且很多场景下有特定的方式处理间距
        Spacer(modifier = Modifier.width(5.dp))

        // 显示用户名
        Column(
            modifier = Modifier
                .padding(start = 3.dp)
                .align(Alignment.CenterVertically) // 垂直居中
        ) {
            Text(text = userName, fontWeight = FontWeight.Bold)
            // LocalContentAlpha provides ContentAlpha.medium 这是一种代码的写法
            // 把 ContentAlpha.medium 这个透明度的值传入其子代码中，是为隐式传参
            CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
                Text(text = userSignature, style = MaterialTheme.typography.body2)
            }
        }
    }
}

/**
 * 约束条件和布局分离方式
 * 在某些情况下我们需要将约束条件和应用的布局分离开，便于使用。
 * 如：根据屏幕配置来更改约束条件，或在两个约束条件集之间添加动画效果等。
 * 具体步骤如下：
 * 生成一个ConstraintSet对象，并将其作为参数传递给 ConstraintLayout；
 * 使用Modifier.layoutId修饰符将在ConstraintSet中创建的引用分配给可组合项
 */
@Composable
fun IdCardConstraintSet(){
    BoxWithConstraints(
        modifier = Modifier
            .fillMaxSize(),
    ) {
        val constraintSet = if (maxWidth < maxHeight) {
            decoupledConstraints(marginBottom = 35.dp, marginEnd = 10.dp)
        } else {
            decoupledConstraints(marginBottom = 15.dp, marginEnd = 15.dp)
        }
        // modifier.height(IntrinsicSize.Min) 用于测量子元素的高度
        // 生成一个ConstraintSet对象，并将其作为参数传递给 ConstraintLayout
        ConstraintLayout(
            constraintSet,
            modifier = Modifier
                .fillMaxSize()
        ) {
            Box(modifier = Modifier
                .fillMaxSize()
//                .background(Color(235, 99, 99, 255)),
            ) {
                Column() {
                    // 用于填充状态栏的空白
//                    Spacer(modifier = Modifier
//                        .statusBarsHeight()
//                        .fillMaxWidth())
                    val t = "TODO(\"这里放地图)\""
                    Text(t)
                }
            }
            IDCard(
                modifier = Modifier
                    .layoutId("userIDCard"),
                onClicked = { Log.d("IDCard Test", "Clicked IDCard") },
                userName = "TestName",
                userSignature = "TestSignature",
                userAvatarId = R.drawable.ic_launcher_background
            )
        }
    }
}

/**
 * 创建一个ConstraintSet实例
 */
private fun decoupledConstraints(
    marginTop: Dp = 0.dp,
    marginStart: Dp = 0.dp,
    marginBottom: Dp = 0.dp,
    marginEnd: Dp = 0.dp): ConstraintSet {
    return ConstraintSet {
        val idCard = createRefFor("userIDCard")

        constrain(idCard){
            bottom.linkTo(parent.bottom, margin = marginBottom)
            end.linkTo(parent.end, margin = marginEnd)
        }
    }
}

@Preview("IDCard preview", showBackground = false)
@Composable
fun IDCardPreview(){
    ParkingSharingTheme {
//        IDCard(
//            modifier = Modifier.layoutId("userIDCard"),
//            onClicked = { Log.d("IDCard Test", "Clicked IDCard") },
//            userName = "TestName",
//            userSignature = "TestSignature",
//            userAvatarId = R.drawable.ic_launcher_background)
        IdCardConstraintSet()
    }
}
